<template>
<div>
	<div v-if="isLoaded">
		<p
		class="order-tip">报修内容（{{user.time.split(' ')[0]}}）</p>
		<UserInfo
		v-if="usertype !== 'user'"
		:user="user"></UserInfo>
		<Location
		:user="user"></Location>
		<div id="order_content">
			<div class="order-line margin border">
				{{user.content.txt}}
				<playAudio v-if="user.content.audio"
				:src="user.content.audio"></playAudio>
			</div>
			<div class="order-line img-container"
			v-show="user.content.img.length">
				<span class="img-wrapper" v-for="img in user.content.img"
				@click="activeImg = img">
					<img :src="img">
				</span>
			</div>
		</div>
		<RepairDepartment
		v-if="user.to"
		:dept="user.to"></RepairDepartment>
		<RepairmanResult
		v-if="!repairman.content.isEmpty"
		:repairman="repairman"
		:user="user"
		@clickImg="clickImg"></RepairmanResult>
		<RepairmanInfo
		v-if="repairman.name && usertype !== 'repairman'"
		:repairman="repairman"
		:margin=true></RepairmanInfo>
		<RepairmanConfirm
		v-if="orderPartShow('repairmanConfirm')"
		@clickImg="clickImg"
		:addRepair="addRepair"
		@imgChange="imgChange"
		@isFinished="isFinished"
		@writeComment="writeComment"
		@recordId="recordChange"></RepairmanConfirm>
		<RepairmanProcess
		v-if="repairman.process.length"
		:process="repairman.process"
		@clickImg="clickImg"></RepairmanProcess>
		<!-- 这里弹出大照片先单独写了 -->
		<transition name="fade">
			<div class="img-pop-bg" v-if="activeImg"
			@click="activeImg = ''">
				<img @click.stop :src="activeImg">
			</div>
		</transition>
		<!-- 新加入订单状态 -->
		<div class="order-line margin">
			<span class="fl">订单状态</span>
			<span class="fr">{{orderStatus}}</span>
		</div>
		<!-- 二次报修先放在这里了 -->
		<router-link v-if="lastRepair" class="order-line margin arrow"
		:to="`/repair/order/user/${lastRepair}`">
			上一次报修处理
		</router-link>
		<!-- <div class="order-line arrow margin" @click="next">下一单</div> -->
		<UserConfirm
		v-if="orderPartShow('userConfirm')"
		:id="id"
		:userId="userId"></UserConfirm>
		<RepairmanConfirmBtn
		v-if="orderPartShow('repairmanConfirm')"
		@complete="addRepair = true"
		:repairForm=repairForm></RepairmanConfirmBtn>
		<Dispatcher
		v-if="orderPartShow('dispatcher')"></Dispatcher>
		<Boss
		v-if="orderPartShow('boss')"
		:org="user.toId"></Boss>
	</div>
	<loading v-else></loading>
</div>
</template>
<script>
	import {getUser, getDept} from './assets/js/global.js'
	import {myAlert, myHttp, nextPage} from './assets/js/utils.js'
	import RepairmanResult from './OrderParts/RepairmanResult'
	import RepairmanInfo from './OrderParts/RepairmanInfo'
	import RepairmanConfirm from './OrderParts/RepairmanConfirm'
	import RepairmanProcess from './OrderParts/RepairmanProcess'
	import RepairmanConfirmBtn from './OrderParts/RepairmanConfirmBtn'
	import UserConfirm from './OrderParts/UserConfirm'
	import UserInfo from './OrderParts/UserInfo'
	import Location from './OrderParts/Location'
	import RepairDepartment from './OrderParts/RepairDepartment'
	import Dispatcher from './OrderParts/Dispatcher'
	import Boss from './OrderParts/Boss'
	import addImg from './addImg'
	import playAudio from './OrderParts/PlayAudio'
	import loading from './Loading'
	// type: 1报修人未接受/待分配/分诊台 2报修人处理中 3报修人处理完毕已评价 4报修人处理完毕未评价
	// 		 5处理人待处理 6处理人待评价/已评价 7分诊台
	// 		 8负责人待分配 2负责人处理中 3负责人处理完毕
	// is_twice: 是否为二次订单
	export default{
		name: 'order',
		mounted(){
			document.title = '报修单详情';
			let deptInfo = [];
			getUser().then((user) => {
				if(!user) return;
				this.userId = user.userId;
			})
			getDept().then((dept) => {
				this.deptInfo = dept;
			})
			this.usertype = this.$route.params.usertype;
			this.getOrder(this.$route.params.id);
		},
		data(){
			return {
				id:'',
				userId:'',
				type: '',
				usertype: '',
				lastRepair: '',
				parts:[],
				deptInfo:{},
				user: {
					name: '',
					phone: '',
					location: '',
					content: {
						audio: '',
						txt: '',
						img: []
					},
					to: '',
					toId:'',
					time:''
				},
				repairman: {
					name: '',
					phone: '',
					completeTime:'',
					content: {
						audio: '',
						txt: '',
						img: [],
						isEmpty:true
					},
					process: []
				},
				repairForm:{
					txt: '',
					audio: '',
					img: [],

					isFinished: false
				},
				activeImg: '',
				addRepair: false,
				orderStatus: '',
				isLoaded: false
			}
		},
		methods:{
			// 用户权限
			userAuthentic(){
				getUser().then(r => {
					console.log(r)
				})
			},
			getOrder(id){
				// 留一个备用id: f1f138b5c48f49709a29a1e41abe5458
				myHttp('getRepairDetial.do',{
					id: id
				}, () => {
					this.isLoaded = false;
				}).then((r) => {
					this.isLoaded = true;
					if(r.failed) return;
					let data = r.obj;
					// 根据用户类别判断特殊情况
					switch(this.usertype) {
						case 'user':
							if(data.statusCode === 'WAIT_EVALUATE') this.parts = ['userConfirm'];
							break;
						case 'repairman':
							if(data.statusCode === 'IN_HANDLE' || data.statusCode === 'WAIT_RECEIVE') this.parts = ['repairmanConfirm'];
							break;
						case 'dispatcher':
							if(data.statusCode === 'DISPATCH_S') this.parts = ['dispatcher'];
							break;
						case 'boss':
							if(data.statusCode === 'WAIT_DISPATCH') this.parts = ['boss'];
							break;
					}
					// 重新整理数据部分…
					this.lastRepair = data.lastRepairId;
					this.user = {
						name: data.applyUserName,
						phone: data.applyUserPhone,
						location: data.repairAddress,
						time: data.createTime,
						content: {
							audio: 
							// 'http://61.183.158.70/rod-repair/repairFile/0f3e62c0e28b42ef9906013a04d8a883.mp3',
							//http://61.183.158.70/rod-repair/repairFile/b09bfb6c99cc4bb59bcbecb62cf6e944.mp3', 
							this.handleAudio(data.mp3Url),
							txt: data.repairExplains,
							img: this.handleImg(data.photoUrl)
						}
					}
					this.user.toId = data.handleDept;
					this.user.to = data.handleDept ? this.deptInfo[data.handleDept].name : '';
					this.repairman.name = data.handleUserName;
					this.repairman.phone = data.handleUserPhone;
					this.repairman.content = data.repairResult ? {
						audio: this.handleAudio(data.repairResult.mp3Url),
						txt: data.repairResult.handleDesc,
						img: this.handleImg(data.repairResult.photoUrl),
						time: data.repairResult.handleTime,
						isEmpty: false
					} : {
						isEmpty: true
					}
					if(Array.isArray(data.repairProcess)){
						let processs = [];
						data.repairProcess.forEach((e) => {
							let obj = {};
							obj.audio = this.handleAudio(e.mp3Url);
							obj.txt = e.handleDesc;
							obj.time = e.handleTime;
							obj.img = this.handleImg(e.photoUrl);
							processs.push(obj);
						})
						this.repairman.process = processs;
					} else this.repairman.process = [];
					this.orderStatus = data.statusName;
				})
			},
			clickImg(img){
				this.activeImg = img;
			},
			// 以下都是维修人员模块确认维修时传过来的数据…
			imgChange(files){
				this.repairForm.img = files;
			},
			isFinished(isFinished){
				this.repairForm.isFinished = isFinished;
			},
			writeComment(comment){
				this.repairForm.txt = comment;
			},
			recordChange(id){
				this.repairForm.audio = id;
			},
			orderPartShow(part){
				if(this.parts.indexOf(part) !== -1) return true;
			},
			// 给图片加地址
			handleImg(imgArr){
				let img = [], prefix = 'http://wchattest.stiei.edu.cn/rod-repair/repairFile/';
				if(!imgArr) retun;
				imgArr.forEach((e) => {
					img.push(prefix + e);
				})
				return img;
			},
			handleAudio(audio){
				return audio ? `http://wchattest.stiei.edu.cn/rod-repair/repairFile/${audio}` : '';
			},
			next(){
				nextPage(this.$router, this.$route);
			}
		},
		beforeRouteUpdate (to, from, next){
			this.usertype = to.params.usertype;
			this.getOrder(to.params.id);
			next();
			// hhh终于发现不写next()的用处了…可以伪造连接不变但是更新了数据的样子…注意这里得用beforeRouteUpdate, 不然的话光是改变params页面是不会有反应的喔
		},
		components: {playAudio, addImg, RepairmanResult, RepairmanProcess, RepairmanInfo, RepairmanConfirm, RepairmanConfirmBtn, RepairDepartment, UserInfo, UserConfirm, Dispatcher, Boss, Location, loading}
	}
</script>
<style lang='less'>
.order-tip{
	margin: .3rem .4rem;
	color: #9b9b9b;
	font-size: 0.32rem;
}
</style>